<template>
    <div class="shopcar">
        <div class="content" @click="toggleList">
            <div class="content-left">
                <div class="logo_wrapper">
                    <div class="logo" :class="{'highlight': totalCount>0}">
                        <i class="icon-shopping_cart" :class="{'highlight': totalCount>0}"></i>
                    </div>
                    <div class="num" v-show="totalCount>0">{{totalCount}}</div>
                </div>
                <div class="price" :class="{'highlight': totalPrice>0}">{{totalPrice}}元</div>
                <div class="desc">另需配送费¥{{deliveryPrice}}元</div>
            </div>
            <div class="content-right">
                <div class="pay" :class="payClass">
                    {{payDesc}}
                </div>
            </div>
        </div>
        <transition name="my">
            <div class="showcart-list" v-show="listShow">
                <div class="list-header">
                    <h1 class="title">购物车</h1>
                    <span class="empty">清空</span>
                </div>
                <div class="list-content">
                    <ul>
                        <li class="food" v-for="(food, index) in selectFoods" :key=index>
                            <span class="name">{{food.name}}</span>
                            <div class="price">
                                <span>¥{{food.price*food.count}}</span>
                            </div>
                            <div class="cartcontrol-wrapper">
                                <cartcontrol :food="food"></cartcontrol>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
import cartcontrol from '../cartcontrol/cartcontrol.vue'

export default {
    props: {
        selectFoods:{
            type: Array,
            default(){
                return [
                   
                ];
            }
        },

       deliveryPrice:{
           type: Number,
           default: 0
       },
       minPrice:{
           type: Number,
           default: 0
       }
    },
    components:{
        cartcontrol
    },
    data(){
        return {
            fold: true,
        }
    },
    computed:{
        totalPrice(){
            let total = 0
            this.selectFoods.forEach((food) => {
                total += food.price * food.count
            })
            return total
        },
        totalCount(){
            let count = 0
            this.selectFoods.forEach((food) => {
                count += food.count
            })
            return count
        },
        payDesc(){
            if (this.totalPrice === 0){
                return `¥${this.minPrice}元起送`
            }else if(this.totalPrice<this.minPrice){
                let diff = this.minPrice - this.totalPrice
                return `还差${diff}元起送`
            }else{
                return '去结算'
            }
        },
        payClass(){
            if(this.totalPrice>this.minPrice){
                return 'enough'
            }else{
                return 'not-enough'
            }
        },
        listShow(){
            if(!this.totalCount){
                this.fold = true
                return false
            }
            let show = this.fold
            return show
        }
    },
    methods:{
         toggleList(){
        if(!this.totalCount){
            return 
        }
        else{
            this.fold = !this.fold
        }
    }
 }
   
    
}
</script>
<style lang="stylus">
    .shopcar
        position fixed
        left 0
        bottom 0
        z-index 50
        width 100%
        height 48px
        vertical-align top

        // background #000
        .content
            display flex
            background #141b27
            font-size 0
            color rgba(255, 255, 255, 0.4)
            .content-left
                flex 1
                .logo_wrapper
                    display inline-block
                    position relative
                    top -10px
                    margin 0 12px
                    padding 6px
                    width 56px
                    height 56px
                    box-sizing border-box
                    vertical-align top
                    border-radius 50%
                    background #141b27
                    .num
                        position absolute
                        top 0
                        right 0
                        width 24px
                        height 16px
                        line-height 16px
                        text-align center
                        border-radius 16px
                        font-size 9px
                        font-weight 400
                        color #fff 
                        background rgb(240, 20,20)
                        box-shadow 0 4px 8px rgba(0, 0, 0, 0.4)
                    .logo
                        &.highlight
                            background rgb(0, 160, 220)
                        width 100%
                        height 100%
                        border-radius 50%
                        text-align center
                        background #2b343c
                        .icon-shopping_cart
                            font-size 24px
                            line-height 44px
                            color #80858a
                            &.highlight
                                color #fff
                .price
                    display inline-block
                    line-height 24px
                    margin-top 12px
                    box-sizing border-box
                    padding-right 12px
                    border-right  1px solid rgba(255, 255, 255, 0.1)
                    font-size 16px
                    font-weight 700
                    color rgba(255, 255, 255, 0.2)
                    &.highlight
                        color: #fff
                .desc
                    display inline-block
                    vertical-align top
                    line-height 24px
                    margin 12px 0 0 12px
                    font-size 10px
            .content-right
                flex 0 0 105px
                width 105px
                .pay
                    height 48px
                    line-height  48px
                    text-align center
                    font-size 12px
                    font-weight 700
                    background #2b333b
                    &.not-enough
                        background #2b333b
                    &.enough
                        background #00b43c
                        color: #fff
        .showcart-list
            display none 
        
</style>